<template>
  <div class="main">
    <div class="top">
      <div class="head"><img src="../../assets/img/userhead/User07b.svg"></div>
      <div class="userName">{{collge}}</div>
      <div class="text">
        <div id="num">{{num}}</div>
        <div id="ch">已审核证明</div>
      </div>
    </div>
    <div class="content">
    <div class="function">
    <div class="function-size" @click="click1">
      <img src="../../assets/img/icon/mine_185.svg">
      <span>上传综测细则</span>
    </div>
    <div class="function-size" @click="click2">
      <img src="../../assets/img/icon/mine_184.svg">
      <span>下载总表</span>
    </div>
    <div class="function-size" @click="click3">
      <img src="../../assets/img/icon/mine_188.svg">
      <span>常用加分项管理</span>
    </div>
    <div class="function-size" @click="click4">
      <img src="../../assets/img/icon/mine_123.svg">
      <span>意见反馈</span>
    </div>
    </div>
    <div class="logout" @click="logout">退出登录</div>
  </div>
    <div class="downloadTableFloatWindow" v-if="isDownloadTableWindow">
      <img src="../../assets/img/icon/information-security-1.svg">
      <p>是否确认下载总表？</p>
      <div class="text">总表是集合了整个学院的综测总分表格。</div>
      <div class="windowBar">
        <div id="no" @click="clickNo">取消</div>
        <div id="yes" @click="clickYes">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import YBOpenApi from '../../service/YBOpenApi'
export default {
  name: 'Mine2',
  data () {
    return {
      isDownloadTableWindow: false,
      num: 0
    }
  },
  methods: {
    click1: function () {
      this.$router.push({ name: 'Eupload' })
    },
    click2: function () {
      this.isDownloadTableWindow = true
      this.$store.commit('changeCoverableState', true)
    },
    click3: function () {
      this.$router.push({ name: 'Emanage' })
    },
    click4: function () {
      this.$router.push({ name: 'Eoptinion' })
    },
    clickNo: function () {
      // 取消
      this.isDownloadTableWindow = false
      this.$store.commit('changeCoverableState', false)
    },
    clickYes: function () {
      // 确认下载总表
      this.isDownloadTableWindow = false
      this.$store.commit('changeCoverableState', false)
      // window.location.assign(this.$store.state.headURL + '/college/download?college=' + this.$store.state.name)
      const college = this.$store.state.LoginUser.collegeName
      const downloadUrl = 'http://localhost:9000/studentevaluation/api/exam/ExcelDownload?college=' + college
      window.location.assign(downloadUrl)
      // axios({
      //       url:'/college/download',
      //       method: 'get',
      //       params:{
      //       college:this.$store.state.name},
      //       responseType: 'blob'
      //
      // }).then(res=>{
      //   console.log(res)
      //   const content = res.data
      //   const blob = new Blob([content])
      //   const fileName =  this.$store.state.name + '年度总表'+'.xls'
      //   if ('download' in document.createElement('a')) { // 非IE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // 释放URL 对象
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }
      // })
    },
    async logout () {
      // 清楚本地信息
      this.$store.commit('initUser', null)
      sessionStorage.removeItem('LoginUser')
      this.$router.push({
        name: 'login'
      })
    }
  },
  computed: {
    collge: function () {
      // return this.$store.state.name
      var name = '华南农业大学'
      try {
        name = this.$store.getters.getLoginUser.collegeName
        // console.log('----------------以下是登录信息-------------------')
        // console.log(this.$store.getters.getLoginUser)
        // console.log('------------------登录信息----------------------')
      }
      catch (e) {
        console.log(e)
      }

      return name
    }
  },
  mounted () {
    // lyl:更新至cloud版本 exam模块
    axios('/studentevaluation/api/exam/examNum?college=' + this.$store.getters.getLoginUser.collegeName).then(res => { this.num = res.data.data })
  }
}
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
    overflow: hidden;
  }
  .top{
    position: fixed;
    width: 100%;
    height: px2rem(125);
    background:linear-gradient(180deg,rgba(2,164,237,1) 0%,rgba(89,194,255,1) 100%);
    .head{
      width: px2rem(51);
      height: px2rem(51);
      margin-left: px2rem(20);
      margin-top: px2rem(9);
      img{
        width: 100%;
        height: 100%;
      }
    }
    .userName{
      position: absolute;
      left: px2rem(88);
      top: px2rem(26);
      font-size:px2rem(22);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(30);
      color:rgba(255,255,255,1);
    }
    .text{
      width: px2rem(60);
      height: px2rem(45);
      position: absolute;
      left: px2rem(295);
      top: px2rem(80);
      display: flex;
      flex-direction: column;
      align-items: center;
      #num{
        width: px2rem(48);
        height: px2rem(28);
        font-size:px2rem(20);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(28);
        color:rgba(255,255,255,1);
        text-align: center;
      }
      #ch{
        width: px2rem(60);
        height: px2rem(17);
        font-size:px2rem(12);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(17);
        color:rgba(255,255,255,1);
        /*opacity:1;*/
        white-space: nowrap;
      }
    }
  }
  .content{
    width: 100%;
    height: px2rem(490);
    position: relative;
    top: px2rem(125);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .function{
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:400;
    line-height:px2rem(25);
    color:rgba(38,38,38,1);
  }
  .function-size{
    width: 100%;
    height: px2rem(54);
    border: px2rem(0.4)solid #b2b2b2;
    display: flex;
    align-items: center;
    background: white;
    span{
      margin-left: px2rem(19);
    }
    img{
      width: px2rem(20);
      height: px2rem(20);
      margin-left: px2rem(35);
    }
  }
  .logout{
    width: 100%;
    height: px2rem(54);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:400;
    line-height:px2rem(25);
    color:rgba(204,15,15,1);
    margin-top: px2rem(16);
    border: px2rem(0.4) solid #b2b2b2;
    background: white;
  }
  .downloadTableFloatWindow{
    width: px2rem(280);
    height: px2rem(350);
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31);
    float: left;
    position: absolute;
    z-index: 3;
    top: px2rem(95);
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    img{
      width: px2rem(165);
      height: px2rem(150);
      margin-top: px2rem(16);
      margin-left: px2rem(61);
    }
    p{
      width: px2rem(216);
      height: px2rem(33);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
      margin-left: px2rem(32);
      margin-top: px2rem(24);
    }
    .text{
      width: px2rem(252);
      height: px2rem(20);
      margin-left: px2rem(14);
      margin-top: px2rem(12);
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(20);
      color:rgba(188,191,196,1);
    }
    .windowBar{
      width: px2rem(280);
      height: px2rem(70);
      position: absolute;
      bottom: 0;
      background: rgba(241,241,241,1);
      border-radius:0 0 px2rem(31) px2rem(31);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(25);
      color:rgba(255,255,255,1);
      #no{
        width: px2rem(80);
        height: px2rem(44);
        background: url("../../assets/img/icon/cancel.svg");
        background-size: 100% 100%;
        margin-left: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #yes{
        width: px2rem(80);
        height: px2rem(44);
        background: url("../../assets/img/icon/determine.svg");
        background-size: 100% 100%;
        margin-right: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
